<template>
  <div class="container-div clearfix">
    <div class="header-div"><i class="header-icon"></i><span>进出车辆明细</span></div>
    <ul class="turnover-list-ul">
      <li class="turnover-list-li" v-for="car in cardata" v-if="parseInt(car.leaseState) === 0 && !car.leaveTime">
        <div class="turnover-list-li-div">
          <div class="tL-message">
            <span class="into-gate">进闸</span>
            <span class="em">{{car.plateNo}}</span>
            <span class="var">{{car.entryTime}}</span>
          </div>
          <div class="tL-price">
            <span class="stop-classify">类别：{{parseInt(car.orderType) === 1 ? '临停' : '月保'}}</span>
          </div>
        </div>
      </li>
      <li class="turnover-list-li" v-else-if="parseInt(car.leaseState) === 0 && car.leaveTime">
        <div class="turnover-list-li-div">
          <div class="tL-message">
            <span class="out-gate">出闸</span>
            <span class="em">{{car.plateNo}}</span>
            <span class="var">{{car.leaveTime}}</span>
          </div>
          <div class="tL-price">
            <span class="stop-classify">类别：{{parseInt(car.orderType) === 1 ? '临停' : '月保'}}</span>
            <span class="stop-price">费用：{{car.amount / 100}}元</span>
            <span class="stop-time">停留：{{toHours(car.stayTime)}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// import api from 'api'

export default {
  name: 'DeviceRight',
  props: {
    cardata: {
      default: []
    }
  },
  components: {
  },

  data () {
    return {
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    toHours (str) {
      let hour = parseInt(str / 3600)
      let minute = parseInt((str - hour * 3600) / 60)
      return `${hour}小时${minute}分钟`
    },
    initData () {
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/base'

.container-div {
  background: #1e1e1e;
  font-size: 12px;
  height: 100%;
  position: relative;
  padding-top: 50px;
  box-sizing: border-box;
}
.header-div {
  position: absolute;
  top: 0px;
  color: #99a1a8;
  height: 50px;
  line-height: 48px;
  padding-left: 20px;
  .header-icon {
    display: inline-block;
    width: 6px;
    height: 19px;
    background: #999999;
    margin-bottom: -5px;
  }
  span {
    margin-left: 10px;
  }
}
.turnover-list-ul {
  width: 100%;
  color: #fff;
  overflow: auto;
  height: 100%;
  font-size: 12px;
  padding-right: 50px;
}

.turnover-list-li
  color #666666
  height 7%
  padding 8px 20px
  .turnover-list-li-div
    border-bottom 1px dashed #666666
    height 100%
    .tL-message
      overflow hidden
      position relative
      .into-gate
        float left
        width 38px
        color #fff
        text-align center
        background-color #B93327
      .out-gate
        float left
        width 38px
        color #fff
        text-align center
        background-color #639DAB
      .em
        float left
        margin-left 13px
        width 122px
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        color #fff
      .var
        color #666666
        position absolute
        right 0px
    .tL-price
      margin-left 51px
      margin-top 6px
      margin-bottom 5px
      color #666666
      position relative
      height 16px
      text-align center
      span
        position absolute
        top 0
      .stop-classify
        left 0px
      .stop-price
        position relative
        margin-right 15px
      .stop-time
        right 0px
        
</style>
